<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:用户中心首页
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584
 -->
<template>
	<view class="body" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
		<view class="status_bar"></view>
		<view class="head-content" @tap="tabSetting">
			<image src="/static/img/setting.png" class="setting-img"></image>
			<text class="setting-text">设置</text>
		</view>
		<scroll-view scroll-y="true" class="scroll-view" :style="{'height': `${windowHeight - 120}px`}">
				<view class="user-info-wrapper">
					<view class="user-info-head">
						<image class="head-img" mode="aspectFill" :src="user!=null?formatUrl(user.head_img,5):'/static/logo.png'" @tap="tapAvater"></image>
						<view class="user-info-content-wrapper" @tap="tapUser">
							<text class="user-name">{{user!=null?user.name:'登录/注册'}}</text>
							<view class="vip-icon-wrapper" v-show="is_active">
								<image src="/static/icon/vip-zuan@2x.png" mode="aspectFill"></image>
								<text>已经开通会员</text>
							</view>
							<text class="user-id" v-if="user==null">登陆一下，内容更精彩</text>
							<text class="user-id" v-if="user!=null">ID: {{user.custom_id==null?'未设置':user.custom_id}}</text>
							<text class="user-id" v-if="user!=null">金币: {{user.money}}</text>
						</view>
					</view>
					<view class="info-wrapper">
						<view class="info-item" @tap="toFans">
							<text class="count">{{user!=null?user.fans_count:'0'}}</text>
							<text class="count-title">粉丝</text>
						</view>
						<view class="info-item info-item-center" @tap="toFollow">
							<text class="count">{{user!=null?user.follow_count:'0'}}</text>
							<text class="count-title">关注</text>
						</view>
						<view class="info-item info-item-center">
							<text class="count">{{user!=null?user.skr_count:'0'}}</text>
							<text class="count-title">获赞</text>
						</view>
						<view class="info-item" @tap="toShare">
							<text class="count">{{user!=null?user.invite_count:'0'}}</text>
							<text class="count-title">推广</text>
						</view>
					</view>
				</view>
				<view class="item-list-wrapper">
					<view class="list-row">
						<view class="list-item" @click="tapItem(0)">
							<image src="/static/icon/item-1.png"></image>
							<text>我的作品</text>
						</view>
						<view class="list-item" @click="tapItem(1)">
							<image src="/static/icon/item-3.png"></image>
							<text>我喜欢的</text>
						</view>
						<view class="list-item" @click="tapItem(2)">
							<image src="/static/icon/item-4.png"></image>
							<text>我的下载</text>
						</view>
					</view>
					<view class="list-row">
						<view class="list-item" @click="tapItem(4)">
							<image src="/static/icon/item-6.png"></image>
							<text>提现金币</text>
						</view>
						<view class="list-item" @click="tapItem(5)">
							<image src="/static/icon/item-8.png"></image>
							<text>账变记录</text>
						</view>
						<view class="list-item" @click="tapItem(7)">
							<image src="/static/icon/item-5.png"></image>
							<text>推广记录</text>
						</view>
					</view>
					<view class="list-row">
						<view class="list-item" @click="tabVip()">
							<image src="/static/icon/item-10.png"></image>
							<text>VIP充值</text>
						</view>
						<view class="list-item" @click="tabIntegral()">
							<image src="/static/icon/item-10.png"></image>
							<text>金币充值</text>
						</view>
				
						<view class="list-item" @click="tapItem(8)">
							<image src="/static/icon/item-11.png"></image>
							<text>个人资料</text>
						</view>
					</view>
					<view class="list-row">
						<view class="list-item" @click="tapItem(9)">
							<image src="/static/icon/shoucang.png"></image>
							<text>我的收藏</text>
						</view>
						<view class="list-item" @click="tapItem(10)">
							<image src="/static/icon/liaotian.png"></image>
							<text>我的聊天</text>
						</view>
				
						<view class="list-item" @tap="h5">
							<image src="/static/icon/H5.png"></image>
							<text>访问H5</text>
						</view>
					</view>
					<view class="list-row">
						<view class="list-item" @click="tapItem(12)">
							<image src="/static/icon/question.png"></image>
							<text>答题记录</text>
						</view>
						<view class="list-item" @click="tapItem(1)">
							<image src="/static/icon/item-2.png"></image>
							<text>我的帖子</text>
						</view>
						<view class="list-item" @click="tapItem(13)">
							<image src="/static/icon/item-5.png"></image>
							<text>我的推广</text>
						</view>
					</view>
					<view class="list-row">
						<navigator url="/pages/index/user/category-search/category-search" hover-class="none" class="list-item">
							<image src="/static/icon/category-search.png"></image>
							<text>栏目搜索</text>
						</navigator>
						<view class="list-item" @tap="CardSecretExchange">
							<image src="/static/icon/item-10.png"></image>
							<text>卡密兑换</text>
						</view>
						<view class="list-item"></view>
					</view>
					<view class="copy">
						系统开发商：一颗优雅草科技-YYC松鼠短视频</br>
						松鼠官网：songshu.youyacao.com</br>
						优雅草官网：www.youyacao.com</br>
						本系统所有内容仅供功能演示不做其他一切商业用途</br>
						Copyright ©优雅草科技 2015-2021 All rights reserved
						</br>
						服务器：腾讯云 内容安全：知道创宇 美颜剪辑：涂图 / 美狐</br>
					</view>
					<!-- <view class="list-row">
						<view class="list-item" @click="tapItem(3)">
							<image src="/static/icon/item-10.png"></image>
							<text>卡密</text>
						</view>
						<view class="list-item" @click="tapItem(4)">
							<image src="/static/icon/item-5.png"></image>
							<text>我的积分</text>
						</view>
						<view class="list-item" @click="tapItem(5)">
							<image src="/static/icon/item-6.png"></image>
							<text>我的收益</text>
						</view>
					</view>
					<view class="list-row">
						<view class="list-item" @click="tapItem(6)">
							<image src="/static/icon/item-7.png"></image>
							<text>我的店铺</text>
						</view>
						<view class="list-item" @click="tapItem(7)">
							<image src="/static/icon/item-8.png"></image>
							<text>邀请好友</text>
						</view>
						<view class="list-item" @click="tapItem(8)">
							<image src="/static/icon/item-9.png"></image>
							<text>我的排行榜</text>
						</view>
					</view> -->
				</view>
			</scroll-view>
			<view class="user-foot"></view>
	</view>
</template>

<script>
	const modal = weex.requireModule('modal')
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import refresh from '@/components/refresh/refresh.vue'
	import videoPage from '@/components/video/video-page.vue'

	export default {
		components: {
			videoPage,
			refresh
		},
		data() {
			return {
				windowHeight: 0,
				height: '667px',
				width: '',
				is_active: false,
				videoData: {
					type: 'user',
					data: [],
					page: 1,
					isMore: true
				}
			}
		},
		created() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.$nextTick(() => {
				setTimeout(() => {
					if (this.isVip()) {
						this.is_active = true;
					}
				}, 500)
			})
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			...mapMutations(['IMlogin', 'IMlogout']),
			CardSecretExchange() {
				modal.prompt({
				    message: '请输入卡密进行兑换',
					okTitle: '立即兑换',
					cancelTitle: '取消'
				}, ({ result, data }) => {
					if (result === '立即兑换') {
						this.$api.CardSecretExchange({ code: data }).then(res => {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						})
					}
				})
			},
			isVip() {
				return this.user && this.user.is_vip;
			},
			tapItem(index) {
				switch (index) {
					case 0: //我的作品
						uni.navigateTo({
							url: "/pages/index/user/subItem/create"
						})
						break;
					case 1: // 我喜欢的
						uni.navigateTo({
							url: "/pages/index/user/like-video/like-video"
						})
						break;
					case 2: // 我的下载
						uni.navigateTo({
							url: '/pages/index/download/download'
						})
						break;
					case 4: //金币提现
						uni.navigateTo({
							url: '/pages/index/user/withdraw'
						})
						break;
					case 5: //金币提现
						uni.navigateTo({
							url: '/pages/index/user/change'
						})
						break;
					case 7: //推广记录
						uni.navigateTo({
							url: '/pages/index/user/inviterecord'
						})
						break;
					case 8: //金币提现
						uni.navigateTo({
							url: '/pages/setting/account'
						})
						break;
					case 9: //我的收藏
						uni.navigateTo({
							url: '/pages/index/user/collection/collection'
						})
						break;
					case 10: //我的聊天
						uni.navigateTo({
							url: '/pages/im-chat/im-list'
						})
						break;
					case 11: //访问h5
						uni.navigateTo({
							url: '/pages/im-chat/im-list'
						})
						break;
					case 12: //访问答题记录
						uni.navigateTo({
							url: '/pages/index/user/subject/record'
						})
						break;
					case 13: //我的推广
						uni.navigateTo({
							url: '/pages/index/user/invite/invite'
						})
						break;
					case 14: //我的帖子
						uni.navigateTo({
							url: '/pages/index/user/subItem/textimage'
						})
						break;
				}
			},
			h5() {
				plus.runtime.openURL('https://videoh5.youyacao.com/');
			},
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			//刷新名需写为isRefresh,刷新组件中会回调此事件
			isRefresh() {
				this.refresh();
			},
			//格式化链接地址
			formatUrl(url1) {
				return url1 && this.$utils.formatUrl(this, url1)
			},
			tabVip() {
				uni.navigateTo({
					url: '/pages/index/user/vip'
				})
			},
			tabIntegral() {
				uni.navigateTo({
					url: '/pages/index/user/integral'
				})
			},
			tabSetting() {
				uni.navigateTo({
					url: '/pages/setting/index'
				})
			},
			tapAvater() {
				if (this.user == null) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths[0]);
						uni.uploadFile({
							url: this.$store.state.baseUrl + '/api/api/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'type': 'img'
							},
							success: (res) => {

								if (res.statusCode != 200) {
									uni.showToast({
										title: '网络错误',
										icon: 'none'
									});
									return;
								}
								var data = JSON.parse(res.data);
								if (data.code == 1) {
									uni.showToast({
										title: data.msg,
										icon: 'none'
									});
									return;
								}
								//调用更新用户信息接口
								this.$api.userUpdate({
									head_img: data.data.url
								}).then((res1) => {
									if (res1.data.code == 1) {
										uni.showToast({
											title: res1.data.msg,
											icon: 'none'
										});
										return;
									}
									uni.showToast({
										title: '修改头像成功'
									});
									this.$store.dispatch('getUserInfo');
								});
							}
						});
					}
				});
			},
			tapUser() {
				if (this.user == null) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
			},
			toFans() {
				if (this.user == null) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/index/user/follow?type=fans'
				})
			},
			toFollow() {
				if (this.user == null) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/index/user/follow?type=follow'
				})
			},
			toShare() {
				uni.navigateTo({
					url: '/pages/index/user/inviterecord'
				})
			},
			getInfo() {
				if (this.user == null) {
					return;
				}
				//获取用户信息
				this.$store.dispatch('getUserInfo');
				this.IMlogin(this.user.phone);
			},
			refresh() {
				this.getInfo()
				this.$refs.refresh.endAfter()
			}
		},
		computed: {
			user() {
				return this.$store.state.user || null;
			}
		}
	}
</script>

<style lang="scss">
	.user-foot {
		flex: 1;
		background-color: #000000;
	}
	.copy {
		margin-top: 20px;
		text-align: center;
		color: #93a7b3;
		font-size: 12px;
		margin-bottom: 20px;
	}

	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}

	.head-content {
		background-color: #418cde;
		height: 88rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.setting-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.setting-text {
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.user-info-wrapper {
		border-radius: 10rpx;
		background: #3370b2;
		margin: 0 24rpx;
	}

	.user-info-head {
		padding: 48rpx 48rpx 24rpx;
		margin-bottom: 24rpx;
		display: flex;

		.head-img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}

		.user-info-content-wrapper {
			flex: 9;
			display: flex;
			flex-direction: column;
			margin-left: 24rpx;
			justify-content: center;

			.user-name {
				font-size: 36rpx;
				color: #F0F0F0;
			}

			.user-id {
				margin-top: 12rpx;
				font-size: 24rpx;
				color: #F0F0F0;
			}

		}
	}

	.info-wrapper {
		background: #3370b2;
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 48rpx;

		.info-item {
			position: relative;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			align-content: center;
		}

		.info-item-center {
			margin-left: -1px;
		}

		.info-item-center:before {
			content: '';
			position: absolute;
			left: 0;
			top: 25%;
			bottom: auto;
			right: auto;
			height: 52%;
			width: 1px;
			background: rgba(255, 255, 255, 0.6);
		}

		.info-item-center:after {
			content: '';
			position: absolute;
			right: 0;
			top: 25%;
			bottom: auto;
			height: 52%;
			width: 1px;
			background: rgba(255, 255, 255, 0.6);
		}

		.count {
			font-size: 36rpx;
			color: #00f1ff;
		}

		.count-title {
			font-size: 24rpx;
			margin-top: 12rpx;
			color: #FFFFFF;
		}
	}

	.item-list-wrapper {
		background: rgba(255, 255, 255, 1);
		border-radius: 10px;
		margin: 24rpx 24rpx 48rpx 24rpx;
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;

		.list-row:last-child {
			border-bottom: none;
		}

		.list-row {
			border-bottom: 1rpx solid rgba($color: #000000, $alpha: 0.08);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 270rpx;

			.list-item {
				width: 30vw;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				align-content: center;

				image {
					width: 70rpx;
					height: 70rpx;

				}

				text {
					margin-top: 40rpx;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, .8);
					line-height: 10rpx;
				}
			}

		}
	}

	.vip-icon-wrapper {
		margin-left: 14rpx;
		background: #000000;
		border-radius: 15rpx;
		height: 40rpx;
		width: 200rpx;
		text-align: center;
		line-height: 40rpx;

		text {
			margin-left: 8rpx;
			font-size: 10px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #F12F5B;
		}

		image {
			height: 22rpx;
			width: 25rpx;
		}
	}

	.body {
		background-color: #418cde;
		flex: 1;
	}
	page {
		display: flex;
	}
</style>
